<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive
          exclude="SearchFood,FoodDetail,Login,CheckOrder,Address,AddAddress,EditAddress"
        >
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    <!-- 底部弹出组件 -->
    <action-sheet v-if="$store.state.actionSheetConfig.isShow"></action-sheet>
  </div>
</template>

<script setup>
import ActionSheet from "./components/ActionSheet.vue";
import { provide, ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const animation = ref("slide");
let routeIndex = route.meta.index;
watch(route, () => {
  animation.value =
    route.meta.index < routeIndex ? "slide-right" : "slide-left";
  routeIndex = route.meta.index;
});

document.addEventListener("contextmenu", (e) => e.preventDefault());

// 注入远程服务器baseURL
provide("BaseURL", "http://127.0.0.1:3000");
</script>

<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-right-enter-from {
  transform: translateX(-100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to,
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 200ms linear;
  position: fixed;
}
</style>